<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=dege" />
    <meta name="format-detection" content="telephone=no" />
    <title>阳光大姐家政培训平台</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link href="images/favicon.ico" rel="icon" type="images/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/headfoot.css" />
    <link rel="stylesheet" href="css/dyf.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/wow.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script>
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
            new WOW().init();
        }
    </script>
</head>

<body>

<div class="return">
    <div class="return-title">
        <div class="in">
            <h1>找回密码</h1>
        </div>
    </div>
    <div class="in">
        <div class="return-cont">
            <p> <i></i> 请输入你需要找回登录密码的账户名</p>
            <ul>
                <li>
                    <label for="">登录名：</label> <input name="phone" placeholder="手机/邮箱/会员名" type="text"> <a href="#">忘记会员吗？</a>
                </li>
                <li>
                    <div class="verify">
                        <span>验证:</span>
                        <div id="verify_box">
                            <div id="verify_xbox" name="img">
                                <div id="btn">
                                    <img src="images/lllllll.png" style="margin-top:3px">
                                </div>
                            </div>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;按住滑块，拖动到最右边
                        </div>
                    </div>
                </li>
                <li class="return-btn">
                    <a href="" class="quezzmm">确定</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    var box=document.getElementById('verify_box');
    var xbox=document.getElementById('verify_xbox');
    var element=document.getElementById('btn');
    var b=box.offsetWidth;
    var o=element.offsetWidth;
    element.ondragstart = function() {
        return false;
    };
    element.onselectstart = function() {
        return false;
    };
    element.onmousedown = function(e) {
        var disX = e.clientX - element.offsetLeft;
        document.onmousemove = function (e) {
            var l = e.clientX - disX +o;
            if(l<o){
                l=o
            }
            if(l>b){
                l=b
            }
            xbox.style.width = l + 'px';
        };
        document.onmouseup = function (e){
            var l = e.clientX - disX +o;
            if(l<b){
                l=o

            }else{
                l=b;
                xbox.innerHTML='验证通过<div id="btn"><img style="margin-top:0" src="images/kkkk.png"/></div>';
            }
            xbox.style.width = l + 'px';
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }
</script>
</body>

</html>